<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>专属祝福</title>
  <style>
    /* 页面基础样式，确保全屏且隐藏滚动条 */
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f8ff; /* 浅蓝背景，可自定义 */
    }
    /* 弹窗样式，不同颜色区分 */
    .popup {
      position: fixed;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      font-size: 16px;
      font-weight: bold;
      color: #333;
      animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    /* 不同弹窗颜色类 */
    .popup-pink { background-color: #ffe6ec; border: 1px solid #f8bbd0; }
    .popup-yellow { background-color: #fff8e1; border: 1px solid #ffecb3; }
    .popup-green { background-color: #e8f5e9; border: 1px solid #c8e6c9; }
  </style>
</head>
<body>
  <!-- 背景音乐 -->
  <audio id="music" src="https://lzy-1385133912.cos.ap-guangzhou.myqcloud.com/Raye_%20-%20%E9%98%BF%E5%86%97-%E4%B8%8E%E6%88%91%E6%97%A0%E5%85%B3%20%28Remix%29.ogg" loop></audio>

  <script>
    // 祝福语列表
    const wishes = [
      "早点休息哦~",
      "你超棒的！",
      "记得好好护肤",
      "多喝水呀~",
      "晚安，做个好梦✨"
    ];
    // 弹窗颜色类列表
    const popupClasses = ["popup-pink", "popup-yellow", "popup-green"];

    // 生成随机位置的弹窗
    function createPopup() {
      const wish = wishes[Math.floor(Math.random() * wishes.length)];
      const className = popupClasses[Math.floor(Math.random() * popupClasses.length)];
      const popup = document.createElement("div");
      popup.className = `popup ${className}`;
      popup.textContent = wish;
      document.body.appendChild(popup);

      // 随机位置（基于屏幕宽高）
      const winWidth = window.innerWidth;
      const winHeight = window.innerHeight;
      const left = Math.random() * (winWidth - 200); // 弹窗宽度约200px，避免超出屏幕
      const top = Math.random() * (winHeight - 100); // 弹窗高度约50px，避免超出屏幕
      popup.style.left = `${left}px`;
      popup.style.top = `${top}px`;

      // 3秒后移除弹窗，实现循环
      setTimeout(() => {
        popup.style.opacity = "0";
        popup.style.transition = "opacity 0.5s";
        setTimeout(() => {
          document.body.removeChild(popup);
        }, 500);
      }, 3000);
    }

    // 定时创建弹窗（每2秒一个）
    setInterval(createPopup, 2000);

    // 处理背景音乐播放（微信需用户交互后才能播放，这里延迟触发）
    setTimeout(() => {
      const music = document.getElementById("music");
      music.play().catch(err => {
        // 若自动播放失败，可提示用户点击页面触发播放
        const tip = document.createElement("div");
        tip.style.position = "fixed";
        tip.style.bottom = "20px";
        tip.style.left = "50%";
        tip.style.transform = "translateX(-50%)";
        tip.style.backgroundColor = "rgba(0,0,0,0.7)";
        tip.style.color = "white";
        tip.style.padding = "10px 15px";
        tip.style.borderRadius = "5px";
        tip.textContent = "点击页面播放音乐哦~";
        document.body.appendChild(tip);
        // 点击页面触发播放
        document.body.addEventListener("click", () => {
          music.play();
          document.body.removeChild(tip);
        });
      });
    }, 1000);
  </script>
</body>
</html>